<script setup>
import { getScheduleApi } from "@/apis/schedule";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";

const scheduleList = ref([]);

//起始时间点
const startPoint = {
  "08:20:00": 0,
  "10:10:00": 1,
  "14:00:00": 2,
  "15:50:00": 3,
  "17:30:00": 4,
  "19:00:00": 5,
};

//表示周几
const dayOfWeek = {
  1: 0,
  2: 1,
  3: 2,
  4: 3,
  5: 4,
};

const scheduleInfo = ref(Array.from({ length: 6 }, () => Array(5).fill({})));

const getSchedule = async () => {
  try {
    const res = await getScheduleApi();

    scheduleList.value = res.data;
    console.log("res为", scheduleList.value);
  } catch (err) {
    console.log("课程表请求错误", err);
    ElMessage.error("课程表请求错误");
  }
};

onMounted(async () => {
  await getSchedule();
  const arr = Array.from({ length: 6 }, () => Array(5).fill({}));
  scheduleList.value.forEach((item) => {
    let row = startPoint[item.time_point];
    let col = dayOfWeek[item.day_of_week];
    arr[row][col] = item;
  });
  scheduleInfo.value = arr;
});
</script>

<template>
  <table id="kcxx">
    <thead>
      <tr id="weekInfo">
        <th style="width: 12%">第十七周</th>
        <th>
          <div class="th-info">
            <div class="week-info">周一</div>
          </div>
        </th>
        <th>
          <div class="th-info">
            <div class="week-info">周二</div>
          </div>
        </th>
        <th>
          <div class="th-info">
            <div class="week-info">周三</div>
          </div>
        </th>
        <th>
          <div class="th-info">
            <div class="week-info">周四</div>
          </div>
        </th>
        <th>
          <div class="th-info">
            <div class="week-info">周五</div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody id="kcInfo">
      <tr>
        <td>
          <div class="course-tiem">
            <div class="time-star">8:20</div>
            <div class="time-end">9:50</div>
          </div>
        </td>

        <td>{{ scheduleInfo[0][0].course }}</td>
        <td>{{ scheduleInfo[1][0].course }}</td>
        <td>{{ scheduleInfo[2][0].course }}</td>
        <td>{{ scheduleInfo[3][0].course }}</td>
        <td>{{ scheduleInfo[4][0].course }}</td>
      </tr>
      <tr>
        <td>
          <div class="course-tiem">
            <div class="time-star">10:10</div>
            <div class="time-end">11:40</div>
          </div>
        </td>
        <td>{{ scheduleInfo[1][0].course }}</td>
        <td>{{ scheduleInfo[1][1].course }}</td>
        <td>{{ scheduleInfo[1][2].course }}</td>
        <td>{{ scheduleInfo[1][3].course }}</td>
        <td>{{ scheduleInfo[1][4].course }}</td>
      </tr>
      <tr>
        <td>
          <div class="course-tiem">
            <div class="time-star">14:00</div>
            <div class="time-end">15:30</div>
          </div>
        </td>
        <td>{{ scheduleInfo[2][0].course }}</td>
        <td>{{ scheduleInfo[2][1].course }}</td>
        <td>{{ scheduleInfo[2][2].course }}</td>
        <td>{{ scheduleInfo[2][3].course }}</td>
        <td>{{ scheduleInfo[2][4].course }}</td>
      </tr>
      <tr>
        <td>
          <div class="course-tiem">
            <div class="time-star">15:50</div>
            <div class="time-end">17:20</div>
          </div>
        </td>
        <td>{{ scheduleInfo[3][0].course }}</td>
        <td>{{ scheduleInfo[3][1].course }}</td>
        <td>{{ scheduleInfo[3][2].course }}</td>
        <td>{{ scheduleInfo[3][3].course }}</td>
        <td>{{ scheduleInfo[3][4].course }}</td>
      </tr>
      <tr>
        <td>
          <div class="course-tiem">
            <div class="time-star">17:30</div>
            <div class="time-end">18:10</div>
          </div>
        </td>
        <td>{{ scheduleInfo[4][0].course }}</td>
        <td>{{ scheduleInfo[4][1].course }}</td>
        <td>{{ scheduleInfo[4][2].course }}</td>
        <td>{{ scheduleInfo[4][3].course }}</td>
        <td>{{ scheduleInfo[4][4].course }}</td>
      </tr>
      <tr>
        <td>
          <div class="course-tiem">
            <div class="time-star">19:00</div>
            <div class="time-end">20:300</div>
          </div>
        </td>
        <td>{{ scheduleInfo[5][0].course }}</td>
        <td>{{ scheduleInfo[5][1].course }}</td>
        <td>{{ scheduleInfo[5][2].course }}</td>
        <td>{{ scheduleInfo[5][3].course }}</td>
        <td>{{ scheduleInfo[5][4].course }}</td>
      </tr>
    </tbody>
  </table>
</template>

<style>
#kcxx {
  width: 100%;
  border-collapse: separate;
  background: #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgb(0, 0, 0, 0.3);
  margin: 20px 0;
  color: #e0e0e0;
}

#kcxx thead {
  background: linear-gradient(90deg, #3a3a3a, #4a4a4a);
}

#kcxx th {
  padding: 12px;
  text-align: center;
  font-weight: 600;
  position: relative;
}

#kcxx th:first-child {
  background: #333;
  color: #ccc;
}

#kcxx tbody tr:hover {
  background: rgb(255, 255, 255, 0.05);
}

#kcxx tbody td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #3a3a3a;
}

.course-item {
  display: flex;
  font-size: 0.9em;
  color: #aaa;
}
</style>
